<script setup lang="ts">
  import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuTrigger,
    DropdownMenuRadioGroup,
    DropdownMenuRadioItem
  } from '@renderer/components/ui/dropdown-menu'
  import { useSettingsStore } from '@renderer/store/modules/settings.store'
  import { languageOptions } from '@renderer/language'
  import { LanguageEnum } from '@renderer/enums/SettingEnum'
  import { useI18n } from 'vue-i18n'

  const settingsStore = useSettingsStore()
  const { locale } = useI18n()
  const changeLanguage = (language: LanguageEnum) => {
    settingsStore.switchLanguage(language)
    locale.value = language
  }
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as="button">
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger as-child>
            <button class="icon-btn">
              <i class="i-mynaui-letter-a-square"></i>
            </button>
          </TooltipTrigger>
          <TooltipContent align="center">
            {{ settingsStore.getNowLanguageLabel }}
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    </DropdownMenuTrigger>
    <DropdownMenuContent
      class="rounded-lg min-w-32 w-[--reka-dropdown-menu-trigger-width2]"
      align="center"
    >
      <DropdownMenuRadioGroup v-model="settingsStore.language">
        <DropdownMenuRadioItem
          v-for="language in languageOptions"
          :key="language.value"
          :value="language.value"
          @click="changeLanguage(language.value)"
        >
          {{ language.label }}
        </DropdownMenuRadioItem>
      </DropdownMenuRadioGroup>
    </DropdownMenuContent>
  </DropdownMenu>
</template>
